<template>
	<view>
		<!-- <movable-area>
			<movable-view class="max" direction="all">
				<treeVue :node="treeList"/>
			</movable-view>
		</movable-area> -->
		<scroll-view class="scroll-Y" scroll-x="true" ref="scrollView" :scroll-into-view="scrollIntoViewId">
			<view class="layout">
				<view class="ranking">
					<RankingVue :tree="treeList"/>
				</view>
				<view class="treeNode">
					<treeVue :node="treeList" ref="treeComponent"  :level="0"/>
				</view>

			</view>

		</scroll-view>
	</view>
</template>

<script>
	import {
		treeList
	} from './config.js'
	import treeVue from '@/components/tree/tree.vue';
	import RankingVue from './ranking/ranking.vue';
	export default {
		components: {
			treeVue,
			RankingVue
		},
		data() {
			return {
				treeList,
				scrollIntoView: '',
				scrollIntoViewId: ''
			};
		},
		onLoad() {
			// setTimeout(()=>{
			// 	this.scrollIntoViewId = '查找'

			// },3000)
		},
		methods: {
			toMove() {

				const query = uni.createSelectorQuery().in(this);
				console.log("query", query);
				query
					.selectAll("#it1")
					.boundingClientRect((data) => {
						console.log("得到布局位置信息" + data);
						console.log("节点离页面顶部的距离为" + data.top);
					})
					.exec();
				// const query = uni.createSelectorQuery().in(this);

				//       // 获取目标元素的边界信息
				//       query.select(`#item11`).boundingClientRect(targetRect => {
				// 	   console.log('targetRect',targetRect)
				//         // if (targetRect) {
				//         //   // 获取 scroll-view 的边界信息
				//         //   query.select('.scroll-Y').boundingClientRect(scrollViewRect => {
				//         //     if (scrollViewRect) {
				//         //       // 计算需要滚动的距离
				//         //       const scrollTop = targetRect.top - scrollViewRect.top;

				//         //       // 滚动到指定位置
				//         //       this.$refs.scrollView.scrollTo({
				//         //         top: scrollTop,
				//         //         duration: 300
				//         //       });
				//         //     }
				//         //   }).exec();
				//         // }
				//       }).exec();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F1E7;
	}

	.max {
		width: 500vw;
		height: 100vh;
	}

	.dd {
		display: flex;
	}
	.layout {
		display: flex;
		width: fit-content;
		.ranking {
			width: 120rpx;
			
		}
		.treeNode {
			flex: 1;
		}
	}
</style>